import React, { Component } from 'react'
import Footer from '../../components/footer'
import './changePswd.scss'
import { NavLink } from 'react-router-dom'
import { Icon, Tag, Button } from 'antd-mobile';

// 订单页面
class Com extends Component {
    
    render() {
        return (
            <div className="container">
                <div className="box">
                    <div className="changePswd_content">
                        <header className="order_header">
                            <NavLink to="/users">
                                <img src="/images/user/personalSet/jiantou.png" alt=""/>
                            </NavLink>
                            <div>
                                <Icon type="search" color="#666666" size="xxs"></Icon>
                                <input type="text" placeholder="搜索"/>
                            </div>
                            <NavLink to="/users">
                                <img src="/images/user/order/omit.png" alt=""/>
                            </NavLink>
                        </header>
                        <nav className="order_nav">
                            <NavLink to="/users/order">全部</NavLink>
                            <NavLink to="/users/order/a">待付款</NavLink>
                            <NavLink to="/users/order/a">待出行</NavLink>
                            <NavLink to="/users/order/a">待点评</NavLink>
                        </nav>
                        <div className="scroll_box">
                            <div className="order">
                                <div className="order_list">
                                    <p>八大洲旅游<Icon type="right" size="xxs"></Icon></p>
                                    <div>
                                        <div className="top">
                                            <img src="/images/user/order/picture.png" alt=""/>
                                            <div style={{flex:"1",marginLeft:".15rem"}}>
                                                <h4>上海朱家角安麓酒店2晚</h4>
                                                <h4>住宿</h4>
                                                <p style={{textIndent:'-5px'}}>【热卖推荐】</p>
                                                <p>酒店评分 4.7 <span></span>  粉丝 2372</p>
                                                <Tag small>私人影院</Tag>
                                                <Tag small>下午茶</Tag>
                                            </div>
                                            <div>
                                                <p style={{color:"#000",textAlign:"right"}}>￥3999.00</p>
                                                <span style={{float:"right",fontSize:"12px"}}>x1</span>
                                            </div>
                                        </div>
                                        <div className="msg">
                                                <div>
                                                    <p  style={{width:".915rem",textAlign:"right"}}>保价险</p>
                                                    <p style={{flex:"1",marginLeft:".15rem",color:"#999999"}}>商品降价赔付差额</p>
                                                    <span style={{color:"#00B145"}}>查看详情</span>
                                                </div>
                                                <div>
                                                    <p style={{width:".915rem",textAlign:"right"}}>公众责任险</p>
                                                    <p style={{flex:"1",marginLeft:".15rem",color:"#999999"}}>人身损害可自动理赔</p>
                                                    <span style={{color:"#00B145"}}>已出单</span>
                                                </div>
                                                <div>
                                                    <p  style={{width:".915rem",textAlign:"right"}}>保险服务</p>
                                                    <p style={{flex:"1",marginLeft:".15rem",color:"#999999"}}>专享定制化购物保障</p>
                                                    <span>￥0.00 x1</span>
                                                </div>
                                            </div>
                                            <p style={{textAlign:"right",fontSize:"9px"}}>总价￥3999.00，优惠￥0.00 实付款￥3999.00</p>
                                    </div>
                                    <div className="btn">
                                        <Button className="button" size="small">修改信息</Button>
                                        <Button className="button" size="small">帮我付</Button>
                                        <Button className="button" size="small" style={{color:"#2DBF66",border:"1px solid #2DBF66" }}>付款</Button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <Footer />
            </div>
        )
    }

}

export default Com